<template>
  <div class="paperFormContainer">
    <Drawer
      :title="formData.title"
      :value="formData.showForm"
      width="850"
      @on-close="handleCancel"
      :mask-closable="false"
    >
      <Form :model="form" :label-width="120" :rules="rules" ref="form">
        <Row>
          <Col span="12">
            <FormItem label="试卷名称：" prop="name">
              <Input v-model="form.name" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入试卷名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="培训类型：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="试卷总分：" prop="name">
              <Input
                v-model="form.score"
                :maxlength="NAME_LENGTH_LIMIT"
                placeholder="请输入试卷总分"
                readonly
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="考试时长：" prop="time">
              <Input v-model="form.time" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入考试时长" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="认知测评：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <FormItem label="试卷描述：" prop="detail">
              <Input
                type="textarea"
                :rows="2"
                v-model="form.detail"
                :maxlength="DESC_LENGTH_LIMIT"
                placeholder="请输入试卷描述"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="btnBox mb20">
        <Button type="primary" @click="handleAdd" icon="md-add" class="mr10">添加</Button>
      </div>
      <div class="tableBox mb20">
        <Table border ref="selection" :columns="columns" :data="tableData" height="500"></Table>
      </div>
      <div class="frow fjcc">
        <Button type="default" @click="handleCancel" class="mr20">{{formData.type=='2'?'关闭':'取消'}}</Button>
        <Button type="primary" @click="handleSubmit" v-if="!readonly">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import mixin from '@/mixin'
export default {
  name: 'paperFormContainer',
  mixins: [mixin],
  props: {
    formData: Object
  },
  data () {
    return {
      eprList: [],
      form: {
        score: 0
      },
      rules: {},
      tableData: [],
      columns: [
        {
          title: '描述',
          align: 'center',
          key: 'username',
          render: (h, params) => {
            return h('Input', {
              props: {
                value: params.row.username

              },
              class: ' ',
              on: {
                'on-change': event => {
                  params.row.username = event.target.value
                }
              }
            })
          }
        },
        {
          title: '固定题',
          align: 'center',
          children: [
            {
              title: '选择试题',
              key: 'building',
              align: 'center'
            },
            {
              title: '试题数',
              key: 'door',
              align: 'center'
            }
          ]
        },
        {
          title: '随机题',
          align: 'center',
          children: [
            {
              title: '选择试题',
              key: 'building',
              align: 'center'
            },
            {
              title: '试题数',
              key: 'door',
              align: 'center'
            }
          ]
        },
        {
          title: '每题分数',
          align: 'center',
          key: 'score',
          render: (h, params) => {
            return h('Input', {
              props: {
                value: params.row.score

              },
              class: ' ',
              on: {
                'on-change': event => {
                  params.row.score = event.target.value
                }
              }
            })
          }
        },
        {
          title: '操作',
          //   fixed: 'right',
          width: window.$config.columnWidth.cc,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  attr: {
                    href: 'javascript:void(0)'
                  },
                  class: 'mc',
                  on: {
                    click: e => {
                      this.formData = {
                        title: '编辑',
                        showForm: true,
                        type: 1,
                        info: params.row
                      }
                    }
                  }
                },
                '删除'
              )

            ])
          }
        }
      ]
    }
  },
  watch: {
    formData: {
      handler (newValue) {
        console.log(newValue)
      },
      deep: true
    }
  },
  computed: {
    readonly () {
      return this.formData.type == '2'
    }
  },
  mounted () {

  },
  methods: {
    handleAdd () {
      this.tableData.push({})
    },
    // 取消
    handleCancel () {
      this.$refs.form.resetFields()
      this.$emit('handleCancel')
    },
    // 确定
    handleSubmit () {
      console.log(this.tableData)
    },
    delOptions (item, index) {
      this.options.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
